<template>
	<!-- 我的 -->
	<view class="my">
		<!-- 状态栏 -->
		<view class="status-bar bg-white pt-30"></view>
		<!-- 头像栏 -->
		<view class="flex items-center wrap-card" hover-class="bg-gray-100" @click="$u.route('/pages/mine/set')">
			<image class="header-img" :src="userInfo.avatarUrl" mode=""
				@click.stop="$u.route('/pages/mine/user-space')"></image>
			<view class="flex flex-col flex-1 px-20">
				<text class="text-32 font-bold">{{userInfo.username}}</text>
			
			</view>
			<text class="iconfont iconqianjin"></text>
		</view>
		<!-- 统计栏 -->
		<view class="wrap-card flex items-center">
			<view v-for="(item,index) in countList" :key="index"
				class="flex-1 flex flex-col items-center justify-center">
				<view class="text-32 font-bold">
					{{item.num}}
				</view>
				<view class="text-28 text-gray-500 mt-10">
					{{item.name}}
				</view>
			</view>
		</view>
		<!-- 广告位 -->
		<view class="wrap-card">
			<image class="adv-img rounded-20" src="../../static/img/list/05.svg" mode="aspectFill"></image>
		</view>
		<!-- 设置 -->
		<u-cell-group :border='false'>
			<u-cell v-for="(item,index) in setList" :key="index" :title="item.name" isLink size="large" :border='false'
				@click="goPage(item.url)">
				<text slot="icon" class="iconfont" :class="item.icon"></text>
			</u-cell>
		</u-cell-group>
	</view>
</template>

<script>
import { UserApi } from '@/api/index.js'
import websocketMixin from '@/utils/mixins/websocketMixin';

	export default {
		mixins: [websocketMixin],
		data() {
			return {
				// 用户信息
				userInfo: {},
				// 统计列表
				countList: [{
						num: null,
						name: '帖子'
					},
				],
				// 设置列表
				setList: [
					{
						icon: 'iconhuiyuan',
						name: '个人空间',
						url: 'user-space'
					},
			
					{
						icon: 'iconshezhi1',
						name: '我的设置',
						url: 'set'
					}
					
				]
			}
		},
		onShow() {
			this.getUserInfo();
		},
		// 监听导航栏按钮点击
		onNavigationBarButtonTap() {
			this.goSet()
		},
		methods: {
			async getUserInfo() {
				const res = await UserApi.getMe()
				this.userInfo = res.data
				this.countList[0].num = res.data.postCount
			},
			goSet() {
				this.$u.route('/pages/mine/set')
			},
			goPage(url) {
				if (url) this.$u.route('/pages/mine/' + url)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my {

		.header-img {
			width: 100rpx;
			height: 100rpx;
			border-radius: 100%;
		}

		.adv-img {
			height: 200rpx;
			width: 100%;
		}
	}
</style>
